import React from 'react';
import PropTypes from 'prop-types';
import AddColorForm from './AddColorForm.jsx';
import { v4 } from 'uuid';
import ColorList from './colorList.jsx';

/*
const colors = [
    {
        title: "blue",
        color: "#0033cc",
        rating: 3,
    },
    {
        title: "purple",
        color: "#3F51B5",
        rating: 5,
    },
    {
        title: "brown",
        color: "#795548",
        rating: 4,
    }
]
*/

class App extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            colors: []
        }
        // 将类的this 绑定到 类里的方法中
        this.addColor = this.addColor.bind(this);
        this.rateColor = this.rateColor.bind(this);
        this.removeColor = this.removeColor.bind(this);
    }
    
    
    addColor(title, color) {
        // 因为constrator里 绑定了this,this指向 类
        const colors = [
            ...this.state.colors,
            {
                id: v4(),
                title,
                color,
                rating: 0,
            }
        ]
        this.setState({ colors });
    }
    rateColor(id, rating) {
        const colors = this.state.colors.map(color => {
            return (color.id != id) ? color : { ...color, rating }
        });
        // console.log('-----222----', colors)
        this.setState({ colors });
    }
    removeColor(id) {
        const colors = this.state.colors.filter(color => color.id !== id);
        this.setState({ colors });
    }
    
    componentDidUpdate(){
        console.log(React.Children);
    }
    render() {
        const { addColor, rateColor, removeColor } = this;
        const { colors } = this.state;
        return (
            <div className="app">
                <AddColorForm onNewColor={addColor} />
                <ColorList colors={colors} onRate={rateColor} onRemove={removeColor} />
            </div>
        )
    }
}
export default App;